<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web期末作业 选择年月日</title>

    <style>
        .select-date {
            display: flex;
            margin: 0 auto;
            width: 300px;
            justify-content: center;
        }

        .year,
        .month,
        .day {
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div class="select-date">
        <label for="year">年:</label>
        <select name="year" id="year" class="year"></select>
        <label for="month">月:</label>
        <select name="month" id="month" class="month"></select>
        <label for="day">日:</label>
        <select name="day" id="day" class="day">
            <option value="0">---日---</option>
        </select>

    </div>


    <script>
        // 获得年月日各自的选项栏
        let year = document.querySelector(".year");
        let month = document.querySelector(".month");
        let day = document.querySelector(".day");
        // 定义一个日期对象，用于获取时间
        let date = new Date();

        // 添加 option
        function addOption(obj, value, inner) {
            // 创建一个 option 对象
            let option = document.createElement("option");
            // 设置其 value 和 innerHTML值
            option.value = value;
            option.innerHTML = inner;
            // 将 option 添加入列表
            obj.appendChild(option);
        }

        // -------------设置年的选项-------------

        // 获取当前年份
        let y = date.getFullYear();
        // 起始年份与终止年份相对于当前年份的时间跨度
        let yearSpan = 5;
        // 年份下拉列表的起始年份
        let start = y - yearSpan;
        // 为年份下拉列表添加年份
        for (let i = 0; i < 2 * yearSpan + 1; i++) {
            addOption(year, i, start + i);
        }
        // 将当前年份设置为默认选项
        year.options[yearSpan].selected = "selected";

        // -------------设置月的选项-------------

        // 获取当前月份
        let m = date.getMonth() + 1;
        // 添加月份
        for (let i = 0; i < 12; i++) {
            addOption(month, i, (i + 1));
        }
        // 将当前月份设置为默认选项
        month.options[m - 1].selected = "selected";

        // -------------设置日的选项-------------

        // 判断当前年是否为闰年
        function isBissextile(year) {
            if ((year % 4 == 0) && ((year % 100) != 0) || year % 400 == 0) {
                return true;
            }
            return false;
        }
        // 判断是否为大月
        function isBigYear(month) {
            // 为大月的月份
            let bigYear = [1, 3, 5, 7, 8, 10, 12];

            // 判断参数中的月份是否在列表中，是则返回 true，否则返回 false
            for (let i = 0; i < bigYear.length; i++) {
                if (month == bigYear[i]) {
                    return true;
                }
            }

            return false;
        }

        // 设置天的所有选项
        function setDay(y, m) {
            // 某月的天数
            let dayNum = 0;

            // 如果是2月，则判断是否为闰年
            if (m === 2) {
                // 如果是闰年，则2月为29天，反之为28天
                if (isBissextile(y)) {
                    dayNum = 29
                } else {
                    dayNum = 28;
                }
            } else {
                // 不是2月，则判断是否为大月，大月 31天，小月 30天
                if (isBigYear(m)) {
                    dayNum = 31;
                } else {
                    dayNum = 30;
                }
            }

            // 为天的多选框添加日期
            for (let i = 1; i <= dayNum; i++) {
                addOption(day, i, i);
            }
        }
        // 设置当前天数
        setDay(y, m);

        // -------------为三个选项栏添加事件-------------

        // 用来标记年月是否出现修改
        let flag = false;
        // 当年份出现变化时，修改flag为true
        year.addEventListener("change", function () {
            flag = true;
        });
        // 当月份出现变化时，修改flag为true
        month.addEventListener("change", function () {
            flag = true;
        });

        // 当天数选择栏聚焦时，根据年和月计算日，并设置日
        day.addEventListener("focus", function () {
            if (flag == true) {
                day.options.length = 0;
                addOption(day, 0, "---日---")
                // 获得当前选中的年和月
                let y = parseInt(year.options[year.selectedIndex].innerHTML);
                let m = parseInt(month.options[month.selectedIndex].innerHTML);
                // 根据当前选中的年和月设置日
                setDay(y, m);
            }
        });
    </script>
</body>

</html>